<template>
  <div class="table-container" @scroll="handleScroll" >
    <table class="styled-table">
      <thead style="position: sticky; top: -20px; z-index: 1">
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows" :key="rowIndex" :uuid="row.uuid" class="table-row">
          <td
            v-for="header in headers"
            :key="header"
            @click="handleCellClick($event, header, row.uuid)"
          >
            {{ row[header] || '-' }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
// 使用请给唯一标识uuid
import { defineProps, defineEmits, nextTick, ref, watch } from 'vue';
const timer=ref(null)
let isloading=ref(false)
const props = defineProps({
  headers: {
    type: Array,
    required: true,
    default: () => ['标题', '展现', '阅读', '评论', '点赞', '收藏'], 
  },
  rows: {
    type: Array,
    required: true,
    default: () => [
      { 标题: '对celery的，路径，任务路径问题。', 展现: 140, 阅读: 255, 评论: 1, 点赞: 3, 收藏: 8 ,uuid:1},
      { 标题: 'BOM', 展现: 589, 阅读: 503, 评论: 0, 点赞: 19, 收藏: 14,uuid:2 },
      { 标题: 'DOM', 展现: 2147, 阅读: 988, 评论: 0, 点赞: 17, 收藏: 16 ,uuid:3},
      { 标题: 'JS的对象', 展现: 872, 阅读: 1121, 评论: 0, 点赞: 11, 收藏: 19 ,uuid:4},
      { 标题: 'JS预解析', 展现: 223, 阅读: 181, 评论: 0, 点赞: 3, 收藏: 0 ,uuid:5},
      { 标题: 'JS函数', 展现: 63, 阅读: 853, 评论: 0, 点赞: 25, 收藏: 15 ,uuid:6},
      { 标题: 'JS数组，lr等结构语序', 展现: 224, 阅读: 402, 评论: 0, 点赞: 5, 收藏: 10 ,uuid:7},
      { 标题: '初识JS', 展现: 1666, 阅读: 1126, 评论: 0, 点赞: 31, 收藏: 17 ,uuid:8},
      { 标题: 'Bootstrap的使用', 展现: 1438, 阅读: 1366, 评论: 0, 点赞: 20, 收藏: 17 ,uuid:9},
      { 标题: '使用rem单位制，实现页面适应性窗口元素', 展现: 241, 阅读: 395, 评论: 0, 点赞: 5, 收藏: 3, uuid: 10 },
    ]
  },
  loadMore: {
    type:Function,
    required: false,
    default: () => {
      console.log('加载更多!');
    },
  }
});
let row_length =ref(props.rows.length)
watch(() => props.rows, (newRows) => {
  row_length.value = newRows.length;
  isloading.value = false;
})

const emit = defineEmits(['cell-click',"load_more"]);
const handleCellClick = (event, header, cellData) => {
  emit('cell-click', {
    dom: event.target, 
    header, 
    cellData 
  });
};
const handleScroll = async (event) => {
  if (isloading.value) return;
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  if (scrollTop + clientHeight + 5 >= scrollHeight) {
    isloading.value = true;
    if (timer.value) {
      clearTimeout(timer.value)
      timer.value == null
    }
    timer.value==setTimeout(() => { 
      // 认为10s后数据不变就认为数据为空!
      isloading.value = false;
    }, 10000)
     emit("load_more",row_length.value);
  }
}
</script>

<style scoped>
.table-container {
  position: relative;
  /* 列别设置200倍数 */
  max-height: 400px;
  overflow-x: auto; /* 支持水平滚动 */
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border-radius: 10px;
  overflow: scroll;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  text-align: left;
}

.styled-table th {
  background-color: #f8f8f9;
  font-weight: bold;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #007bff;
}

.styled-table tbody tr:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

/* 响应式设计：小屏幕下表格内容换行 */
@media (max-width: 768px) {
  .styled-table th,
  .styled-table td {
    padding: 8px;
    font-size: 14px;
  }
}
</style>